<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>First steps in PyGTK</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="GUI, PyGTK, first steps, Python, programming, Linux">
<meta name="description" content="First steps in PyGTK">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div> 

<div class="content">

<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>First steps in PyGTK</h1>

<p>
In this part of the PyGTK programming tutorial, we will do our first steps in programming.
We will create simple programs. 
</p>

<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* NewSquare */
google_ad_slot = "0364418177";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script>

<h2>Simple example</h2>

<p>
The first code example is a very simple one. 
</p>

<div class="codehead">center.py</div> 
<pre class="code">
#!/usr/bin/python

# ZetCode PyGTK tutorial 
#
# This is a trivial PyGTK example
#
# author: jan bodnar
# website: zetcode.com 
# last edited: February 2009


import gtk

class PyApp(gtk.Window):
    def __init__(self):
        super(PyApp, self).__init__()
        
        self.connect("destroy", gtk.main_quit)
        self.set_size_request(250, 150)
        self.set_position(gtk.WIN_POS_CENTER)
        self.show()

PyApp()
gtk.main()
</pre>

<p>
This code shows a centered window.
</p>

<pre class="explanation">
 import gtk
</pre>

<p>
We import the gtk module. Here we have objects to create GUI applications.
</p>

<pre class="explanation">
 class PyApp(gtk.Window):
</pre>

<p>
Our application is based on the <b class="keyword">PyApp</b> class. It inherits from 
the <b class="keyword">Window</b>.
</p>

<pre class="explanation">
 def __init__(self):
     super(PyApp, self).__init__()
</pre>

<p>
This is the constructor. It builds our application. It also calls
it's parent constructor through the <b class="keyword">super()</b> call.
</p>

<pre class="explanation">
 self.connect("destroy", gtk.main_quit)
</pre>

<p>
We connect the <b class="keyword">destroy</b> signal to the <b class="keyword">main_quit()</b> function.
The <b class="keyword">destroy</b> signal is called when we click on the close
button in the titlebar or press Alt + F4. The window is being destroyed, but
the application is not. You can see it, if you launch the example from the command line.
By calling the <b class="keyword">main_quit()</b> we quit the application for good. 
</p>

<pre class="explanation">
 self.set_size_request(250, 150)
</pre>

<p>
We set the size of the window to 250x150px.
</p>

<pre class="explanation">
 self.set_position(gtk.WIN_POS_CENTER)
</pre>

<p>
This line centers the window on the screen. 
</p>


<pre class="explanation">
 self.show()
</pre>

<p>
Now we show the window. The window is not visible, until we call the 
<b class="keyword">show()</b> method. 
</p>

<pre class="explanation">
 PyApp()
 gtk.main()
</pre>

<p>
We create the instance of our program and start the main loop.
</p>


<h2>Icon</h2>

<p>
In the next example, we show the application icon. Most window managers display the icon 
in the left corner of the titlebar and also on the taskbar.
</p>

<div class="codehead">icon.py</div> 
<pre class="code">
#!/usr/bin/python

# ZetCode PyGTK tutorial 
#
# This example shows an icon
# in the titlebar of the window 
#
# author: jan bodnar
# website: zetcode.com 
# last edited: February 2009


import gtk, sys

class PyApp(gtk.Window):
    def __init__(self):
        super(PyApp, self).__init__()
        
        self.set_title("Icon")
        self.set_size_request(250, 150)
        self.set_position(gtk.WIN_POS_CENTER)

        try:
            self.set_icon_from_file("web.png")
        except Exception, e:
            print e.message
            sys.exit(1)

        self.connect("destroy", gtk.main_quit)

        self.show()

PyApp()
gtk.main()
</pre>

<p>
The code example shows the application icon. 
</p>

<pre class="explanation">
 self.set_title("Icon")
</pre>

<p>
We set a title for the window.
</p>

<pre class="explanation">
 self.set_icon_from_file("web.png")
</pre>

<p>
The <b class="keyword">set_icon_from_file()</b> method sets an icon for the window.
The image is loaded from disk in the current working directory. 
</p>


<br>
<img src="/img/gui/pygtk/icon.png" alt="Icon">
<div class="figure">Figure: Icon</div>
<br>



<h2>Buttons</h2>

<p>
In the next example, we will further enhance our programming skills with 
the PyGTK library.
</p>

<div class="codehead">buttons.py</div>
<pre class="code">
#!/usr/bin/python

# ZetCode PyGTK tutorial 
#
# This example shows four buttons
# in various modes 
#
# author: jan bodnar
# website: zetcode.com 
# last edited: February 2009


import gtk

class PyApp(gtk.Window):
    def __init__(self):
        super(PyApp, self).__init__()
        
        self.set_title("Buttons")
        self.set_size_request(250, 200)
        self.set_position(gtk.WIN_POS_CENTER)
        
        btn1 = gtk.Button("Button")
        btn1.set_sensitive(False)
        btn2 = gtk.Button("Button")
        btn3 = gtk.Button(stock=gtk.STOCK_CLOSE)
        btn4 = gtk.Button("Button")
        btn4.set_size_request(80, 40)

        fixed = gtk.Fixed()

        fixed.put(btn1, 20, 30)
        fixed.put(btn2, 100, 30)
        fixed.put(btn3, 20, 80)
        fixed.put(btn4, 100, 80)
        
        self.connect("destroy", gtk.main_quit)
        
        self.add(fixed)
        self.show_all()


PyApp()
gtk.main()
</pre>

<p>
We show four different buttons on the window. We will see a difference between 
container widgets and child widgets and will change some properties of 
child widgets. 
</p>


<pre class="explanation">
 btn1 = gtk.Button("Button")
</pre>

<p>
A <b class="keyword">Button</b> is a child widget. Child widgets are placed inside
containers. 
</p>

<pre class="explanation">
 btn1.set_sensitive(False)
</pre>

<p>
We make this button insensitive. This means, we cannot click on it. 
Nor it can be selected, focused etc.
Graphically the widget is grayed out.
</p>

<pre class="explanation">
 btn3 = gtk.Button(stock=gtk.STOCK_CLOSE)
</pre>

<p>
The third button shows an image inside it's area. The PyGTK library
has a built-in stock of images, that we can use. 
</p>

<pre class="explanation">
 btn4.set_size_request(80, 40)
</pre>

<p>
Here we change the size of the button. 
</p>

<pre class="explanation">
 fixed = gtk.Fixed()
</pre>

<p>
<b class="keyword">Fixed</b> widget is a non visible container widget. 
It's purpose is to contain other child widgets. 
</p>

<pre class="explanation">
 fixed.put(btn1, 20, 30)
 fixed.put(btn2, 100, 30)
 ...
</pre>

<p>
Here we place button widgets inside fixed container widget. 
</p>

<pre class="explanation">
 self.add(fixed)
</pre>

<p>
We set the <b class="keyword">Fixed</b> container to be the main container for 
our <b class="keyword">Window</b> widget. 
</p>


<pre class="explanation">
 self.show_all()
</pre>

<p>
We can either call <b class="keyword">show_all()</b> method, or 
we call <b class="keyword">show()</b>
method on each of the widgets. Including containers. 
</p>


<br>
<img src="/img/gui/pygtk/buttons.png" alt="Buttons">
<div class="figure">Figure: Buttons</div>
<br>


<h2>Tooltip</h2>

<p>
A tooltip is a hint on a widget in the applications. Can be used
to provide additional help.
</p>

<div class="codehead">tooltips.py</div>
<pre class="code">
#!/usr/bin/python

# ZetCode PyGTK tutorial 
#
# This code shows a tooltip on 
# a window and a button
#
# author: jan bodnar
# website: zetcode.com 
# last edited: February 2009


import gtk

class PyApp(gtk.Window):

    def __init__(self):
        super(PyApp, self).__init__()
      
        self.set_title("Tooltips")
        self.set_size_request(250, 200)
        self.set_position(gtk.WIN_POS_CENTER)

        self.connect("destroy", gtk.main_quit)

        self.fixed = gtk.Fixed()
        self.add(self.fixed)
       
        button = gtk.Button("Button")
        button.set_size_request(80, 35)      
  
        self.fixed.put(button, 50, 50)
      
        self.set_tooltip_text("Window widget")
        button.set_tooltip_text("Button widget")

        self.show_all()

PyApp()
gtk.main()
</pre>

<p>
In this example we set a tooltip for a window and for a
button.
</p>

<pre class="explanation">
 self.set_tooltip_text("Window widget")
 button.set_tooltip_text("Button widget")
</pre>

<p>
The <b class="keyword">set_tooltip_text()</b> does the job.
</p>


<br>
<img src="/img/gui/pygtk/tooltips.png" alt="Tooltips">
<div class="figure">Figure: Tooltips</div>

<hr class="btm">

<p>
In this chapter, we created first programs in PyGTK programming library. 
</p>


<br>
<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 
<br>


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified February 8, 2009  <span class="copyright">&copy; 2007 - 2012 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>
